/**
 * @description 组件类
 * @author vision <vision.shi@tianjishuju.com>
 * @license www.tianjishuju.com/license
 */
import {concat, defaultsDeep, each, extend, map, random, cloneDeep, numberFormat, has, isNaN } from 'data-vi/helpers';
//import EChartMapComponent from '../map/Component';
import ECharts from './echarts';
const echarts = ECharts;
import Component from 'data-vi/Component';
//import { geoCoordMap } from './geoCoordMap';
import _ from 'lodash'

const colors = ['rgba(18,255,254,0.4)', 'rgba(255,203,77,0.4)', 'rgba(245,143,35,0.4)', 'rgba(226,102,82,0.4)'];

export default class EChartBarStackShadowComponent extends Component {

    static defaultOptions = {
        tooltip : {
            show: false,
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            },
            textStyle: {
                fontSize: 32
            }
        },
        backgroundColor: 'rgba(0,0,0,0)',
        color: ['#12fffe', '#ffcb4d', '#f58f23', '#e26652'],
        colors: colors,
        legend: {
            data: ['2018年行业累计预警发布数量'],
            right: '2%',
            top: '5%',
            icon: 'circle',
            itemWidth: 20,
            itemHeight: 20,
            textStyle: {
                color: '#c6e5ff',
                fontSize: 28
            }
        },
        grid: {
            left: '7%',
            right: '5%',
            bottom: '10%',
            top: '10%',
            containLabel: true
        },
        xAxis:  [{
            type: 'value',
            show: false
        },{
            type: 'value',
            show: false
        }],
        yAxis: [{
            type: 'category',
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: true,
                color: '#fff',
                fontSize: 32,
                fontWeight: 500,
                interval: 0
            },
            offset: 40,
            data: [],
        },
            {
                type: 'category',
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: 40,
                    fontWeight: 400,
                    interval: 0
                },
                data: []
            }],
        series: [
            {
                name: '2018年行业累计预警发布数量',
                type: 'bar',
                barWidth: 22,
                itemStyle: {
                    normal: {
                        barBorderRadius: [30,30,30,30],
                        shadowColor: colors[0],
                        shadowBlur: 2,
                        shadowOffsetY:15,
                        color: {
                            type:'linear',
                            x: 0,
                            y: 0,
                            x2: 1,
                            y2: 0,
                            colorStops: [{
                                offset: 0, color: 'red'
                            }, {
                                offset: 1, color: 'blue'
                            }],
                            globalCoord: false
                        }
                    },
                },
                data: []
            },
            {
                name: '2018年行业累计预警发布数量',
                type: 'bar',
                barWidth: 22,
                yAxisIndex:1,
                itemStyle: {
                    normal: {
                        barBorderRadius: [30, 30, 30,30],
                        shadowColor: colors[0],
                        shadowBlur: 40,
                        shadowOffsetY: 35,
                    },
                },
                data: []
            }
        ]
    };

    // 系统事件
    static events = {
        resized() {
            if (this.rendered) {
                this.chart.resize();
            }
        }
    };
    // 默认设置
    static defaultConfig = {
        // 默认宽
        width: 600,
        // 默认高
        height: 500
    };
    _mount() {
        // 初始化HighChart实例
        this.chart = ECharts.init(this.getContainer()[0]);

        //this.chart.on('mapselectchanged', (...args) => this.trigger('pointSelect', ...args));
    }

    getDefaultData() {
        return  [{
            "name": "安监",
            "count": 168
        },
            {
                "name": "卫计委",
                "count": 129
            },
            {
                "name": "水利部",
                "count": 78
            },
            {
                "name": "名航",
                "count": 69
            },{
                "name": "海洋局",
                "count": 30
            }];
    }

    getDefaultDataConfig() {
        return {
            mapping: {
                x: 'name',
                y: 'count'
            }
        };
    }

    /**
     * 标准化数据格式
     *
     * @param {Array<Object>} data 数据
     * @returns {Array}
     * @private
     */
    _normalize(data) {
        // 倒序
        data = _.sortBy(data, [function(o){ return -o.count}])
        const yAxis1Data = [];
        const yAxis2Data = [];
        data.map((item, idx) =>{
            yAxis1Data.push(item['x']);
            yAxis2Data.push(item['y']);
        })

        this.options.yAxis[0].data = yAxis1Data;
        this.options.yAxis[1].data = yAxis2Data;
        let options = cloneDeep(this.options);
        options.series[0].data = yAxis2Data;
        options.series[1].data = yAxis2Data;

        return options.series;

    }

    /**
     * 渲染数据
     *
     * @param {Array<Object>} seriesList 要渲染的数据系列
     * @private
     */
    _draw(seriesList) {
        this.options.series = seriesList;
        this._update();
    }

    _render() {

        const options = cloneDeep(this.getOptions());
        this.chart.setOption(options, true);
    }

};

